<template>
  <div class="details">
    <h4>订单详情</h4>
    <div class="title-num">
      <div class="details-con">
        <span class="con-lf">订单号：</span>
        <span class="con-rt">{{ num }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">收货人姓名：</span>
        <span class="con-rt">{{ details.consigneeName }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">收货人电话：</span>
        <span class="con-rt">{{ details.consigneePhone }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">总金额：</span>
        <span class="con-rt">{{ details.totalFee/100 | currency "" }}元</span>
      </div>
      <div class="details-con">
        <span class="con-lf">支付状态：</span>
        <span class="con-rt">{{ details.payStatus}}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">订单状态：</span>
        <span class="con-rt">{{ details.orderStatus }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">发票类型：</span>
        <span class="con-rt">{{ details.invoiceType }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">单位名称：</span>
        <span class="con-rt">{{ details.companyName }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">交易时间：</span>
        <span class="con-rt">{{ details.payTimes }}</span>
      </div>
      <div class="details-con">
        <span class="con-lf">收货人地址：</span>
        <span class="con-rt">{{ details.consigneeAddress }}</span>
      </div>
    </div>
    <div class="bg-bottom">
      <div class="details-tit" v-for="list in productsList">
        <div class="details-con">
          <p>{{ list.itemName }}</p>
        </div>
        <div v-if="list.itemName != '运费'">
          <div class="details-con">
            <span class="con-lf">金额：</span>
            <span class="con-rt">{{ list.itemSum/100 | currency ""}}元</span>
          </div>
          <div class="details-con">
            <span class="con-lf">数量：</span>
            <span class="con-rt">{{ list.itemNum }}</span>
          </div>
          <div class="details-con">
            <span class="con-lf">产品描述：</span>
            <span class="con-rt">{{ list.itemDesc }}</span>
          </div>
        </div>
        <div class="details-con" v-else>
          <span class="con-lf">金额：</span>
          <span class="con-rt">{{ list.itemSum/100 | currency ""}}元</span>
        </div>
      </div>
    </div>
    <div class="payment" @click="paying" v-show="buyShow">
      <div class="payment-bt">
        <button type="button"><span>立即购买</span></button>
      </div>
    </div>
  </div>
  <toast v-show="loading" :type="'loading'">加载中</toast>
  <dialog v-show="dialog" :title="'错误提示'" :type="" @weui-dialog-confirm="dialog=false">
    <p>加载失败，请重试</p>
  </dialog>
</template>
<script>
  import {Toast, Dialog} from "vue-weui";
  import {AJAX} from "../methods/query.js";
  export default {
    data() {
      return {
        orderId: this.$route.query.orderId,
        num: this.$route.query.num,
        loading: false,
        dialog: false,
        buyShow: false,
        productsList: [],
        details: {}
      };
    },
    methods: {
      async paying() {
        let immediatelyPay = await AJAX.immediatelyPay({
          openid: "openid=" + this.$root.openId,
          orderId: "orderId=" + this.orderId
        });
        window.location.href = "https://pay.swiftpass.cn/pay/jspay?token_id="
        + immediatelyPay.resInfo + "&showwxpaytitle=1";
      }
    },
    async ready() {
      let getOrderDetail = await AJAX.getOrderDetail(this.orderId);
      let getOrder = await AJAX.getOrder(this.orderId);
      this.productsList = getOrderDetail.resInfo;
      this.details = getOrder.resInfo;
      if (this.details.orderStatus === "1") {
        this.details.orderStatus = "已确认";
      } else if (this.details.orderStatus === "2") {
        this.details.orderStatus = "备货中";
      } else if (this.details.orderStatus === "3") {
        this.details.orderStatus = "已发货";
      } else if (this.details.orderStatus === "4") {
        this.details.orderStatus = "已完成";
      } else if (this.details.orderStatus === "5") {
        this.details.orderStatus = "已关闭";
      } else if (this.details.orderStatus === "5") {
        this.details.orderStatus = "已取消";
      }
      if (this.details.payStatus === "00") {
        this.buyShow = true;
        this.details.payStatus = "未支付";
      } else if (this.details.payStatus === "10") {
        this.details.payStatus = "已支付";
      } else if (this.details.payStatus === "20") {
        this.details.payStatus = "支付失败";
      }
    },
    components: {
      Toast,
      Dialog
    }
  };
</script>
<style scoped lang="less">
  .details{
    font-size: .6rem;
    color: #404040;
    h4{
      font-size: .7rem;
      padding:.2rem .5rem;
      background-color: #fff;
    }
    .bg-bottom{
      margin-bottom: 5rem;
      .details-tit{
        background-color: #fff;
        padding:.5rem;
        margin-bottom: .5rem;
      }
    }
    .title-num{
      background-color: #fff;
      padding: 0 .5rem .5rem .5rem;
      border-bottom: 1px solid #eee;
    }
    .details-con{
      padding:.1rem 0;
      clear: both;
      .con-lf{
        display: inline-block;
        float: left;
        width:25%;
      }
      .con-rt{
        text-align: right;
        width:73%;
        display: inline-block;
      }
    }
    .payment{
      position: fixed;
      z-index: 7;
      bottom: 0;
      width:100%;
      height:3rem;
      background-color: #fff;
      .payment-bt button{
        position: fixed;
        bottom: 0;
        padding: .5rem 0;
        width:90%;
        margin-left:5%;
        margin-bottom: .5rem;
        border-radius: .3rem;
        background-color: #15A1D6;
        text-align: center;
        color:#fff;
      }
    }
  }
</style>
